<template>
  <!-- %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%-->
  <!--                    界面1特有的扫码登陆部分，css放login-1.css里面-->
  <section class="login-scan" v-if="!scanned">
    <!--                        二维码-->
    <div class="login-scan-item">
      <img :src="qrCode">
    </div>
    <p class="login-scan-text">打开<span>智慧党建APP</span>扫码登录</p>
  </section>

  <section class="login-scan-2" v-if="scanned">
    <div class="login-scan-2-item">
      <!--                        手机和勾的svg-->
      <div class="scan-2-svg scan-phone-svg"></div>
      <div class="scan-2-svg scan-success-svg"></div>
    </div>
    <div class="scan-text-item">
      <p class="login-scan-2-text">扫描成功，请在手机上确认是否授权登录</p>
      <p class="login-scan-2-text-2">使用其它方式登录，请 <span @click="goBack">返回</span></p>
    </div>
  </section>
</template>

<script setup>
import {getLoginQrCode} from "../../../api/ToolApi.js";
import {onMounted, ref} from "vue";
import {webSocketState} from "../../../store/webSocketState.js";
import {LoginStatus} from "../../../enums/LoginStatusEnum.js";
import {userStore} from "../../../store/userState.js";


onMounted(() => getQrCode())

const webSocketStore = webSocketState()
const qrId = ref('')
const qrCode = ref('/src/assets/images/智慧党建.png')
const scanned = ref(false)


let ws = new WebSocket('ws://localhost:8083/websocket/' + webSocketStore.deviceId)

const getQrCode = async () => {
  const res = await getLoginQrCode(webSocketStore.deviceId)
  if (res.code === 200) {
    qrId.value = res.data.qrId
    qrCode.value = res.data.qrCode
  }
}

const goBack = () => {
  scanned.value = false
}

ws.onopen = function () {
  console.log('websocket open');
}


ws.onmessage = (event) => {
  const message = JSON.parse(event.data)
  if (message.content.qrCodeStatus === LoginStatus.QRCODE_SCANED) {
    scanned.value = true

  } else if (message.content.qrCodeStatus === LoginStatus.QRCODE_CLICKED) {
    userStore().setLoginUser(message.content.data.token, message.content.data.expireTime, message.content.data.userLoginInfoVo)
    location.reload()
  }

}

</script>

<style scoped>
/*界面1特有的扫码登陆部分*/
.login-scan-item {
  margin: 0 auto;
  margin-top: 5rem;
  width: 22rem;
  height: 22rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  border: 2px solid rgba(229, 229, 229, 1);
  background-color: rgba(229, 229, 229, 0.6);
}

.login-scan img {
  width: 20rem;
  height: 20rem;

}

.login-scan-text {
  text-align: center;
  font-size: 1.5rem;
  font-weight: 700;
  margin-top: 2rem;
}

.login-scan-text span {
  color: rgba(156, 0, 0, 1);
}

/*扫码成功界面*/
.login-scan-2 {
  width: 100%;
  margin: 0 auto;
  display: flex;
  margin-top: 10rem;
}

.login-scan-2-item {
  position: relative;
  display: block;
  margin-left: -3rem;
}

.scan-2-svg {
  cursor: pointer;
  background-position: center;
  background-repeat: no-repeat;
}

.scan-phone-svg {
  width: 16rem;
  height: 16rem;
  background-size: 16rem 16rem;
}

.scan-success-svg {
  width: 4.5rem;
  height: 4.5rem;
  background-size: 4.5rem 4.5rem;
  position: absolute;
  top: 0;
  left: 10rem;
  border-radius: 50%;
  background-color: white;
}

.scan-text-item {
  margin-left: -2rem;
  margin-top: 5.5rem;
}

.login-scan-2-text {
  letter-spacing: 0;
  font-size: 1.4rem;
  font-weight: bolder;
}

.login-scan-2-text-2 {
  font-size: 1.2rem;
  color: #CCCCCC;
  margin-top: 1.5rem;
}

.login-scan-2-text-2 span {
  color: royalblue;
}

</style>
